<style lang="less">
    @import './main.less';
</style>
<template>
    <div class="main" :class="{'main-hide-text': shrink}" ref="mainBody">
        <div class="main-header-con">
            <div style="position: relative;">
                <div style="position:absolute;right:20px;top:0px;bottom:0px;padding-top: 2px;">
                    <div>
                        <span>{{rootBtw}}</span>
                        <el-button size="small" @click="upladBtw" type="success">设置模板目录</el-button>
                        <el-button size="small" @click="outgo" type="success">销售单复核</el-button>
                        <el-dropdown style="margin-left:20px" transfer trigger="click" @command="itemClick">
                            <a href="javascript:void(0)">
                                <span class="main-user-name">{{ userName }}({{roleName}})</span>
                                <i class="el-icon-arrow-down" />
                            </a>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="wxWork">微信绑定</el-dropdown-item>
                                <el-dropdown-item command="ownSpace">修改密码</el-dropdown-item>
                                <el-dropdown-item command="loginout" divided>退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </div>
            </div>
        </div>
        <div class="single-page-con">
            <div class="single-page">
                <keep-alive :include="cachePage">
                    <router-view></router-view>
                </keep-alive>
            </div>
        </div>
        <el-backtop target=".single-page-con" :bottom="50">
            <div style="{
        height: 100%;
        width: 100%;
        background-color: #f2f5f6;
        box-shadow: 0 0 6px rgba(0,0,0, .12);
        text-align: center;
        line-height: 40px;
        color: #1989fa;
      }">
                <i class="el-icon-top"></i>
            </div>
        </el-backtop>
        <el-drawer title="打印机设置" :visible.sync="drawer" :direction="'rtl'">
            <div style="padding:0px 10px">
            </div>
        </el-drawer>
    </div>
</template>
<script>
import util from "@/utils/util"
import { getRand } from "@/utils/random"


export default {
    name: "Main",
    data() {
        return {
            drawer: false,
            socket: null,
            shrink: false,
            interval: null,
            rootBtw: ""
        };
    },
    components: {

    },
    create: function() {

    },
    computed: {


        cachePage() {
            return this.$store.state.app.cachePage;
        },
        userName() {
            // return this.$store.state.user.userName;
            return localStorage.userName;
        },
        roleName() {
            // return this.$store.state.user.userName;
            return localStorage.roleName;
        },

    },
    mounted: function() {

        this.init();
    },
    beforeRouteLeave(to, from, next) {
        if (to.name == "Login" && this.interval) {
            window.clearInterval(this.interval);

        }
        next();
    },
    beforeRouteUpdate(to, from, next) {



        next();
    },
    beforeRouteEnter(to, from, next) {

        next();
    },
    watch: {
        '$route'(to) {


        }
    },
    methods: {
        init() {
            global.ipcRenderer.on("setFilePath", (_event, value) => {

                if (value) //收到文件夹，转给页面
                {
                    localStorage.setItem("rootBtw", value);
                    this.rootBtw = value;
                    this.successMessage("设置模板根目录成功：" + value);
                }
            });
            global.ipcRenderer.on("rootFilePath", (_event, value) => {

                if (value) //收到文件夹，转给页面
                {
                    localStorage.setItem("rootBtw", value);
                    this.rootBtw=value;
                    this.successMessage("模板根目录：" + value);
                }
            });
        },
        upladBtw: function(filepath) {
            //window.sendOpenFileDialog();
             global.ipcRenderer.send('openFile', "")

         
        },
        outgo: function() {
            this.$router.push({
                name: "Outgo"
            });
        },

        beforePush(name) {
            // if (name === 'accesstest_index') {
            //     return false;
            // } else {
            //     return true;
            // }
            return true;
        },

        itemClick: function(name) {
            if ("ownSpace" == name) {
                this.$router.push({ name: "Password" }, () => {}, (e) => {

                });
            } else if ("wxWork" == name) {
                this.$router.push({ name: "Weixin" }, () => {}, (e) => {

                });
            } else this.loginout();
        },
        loginout: function(name) {

            var me = this;
            me.$store
                .dispatch("loginOut")
                .then(res => {

                    if (res.status == 0) {
                        me.$router.push("/login");
                    } else {
                        me.errorMessage(res.info);
                    }
                }).catch(error => {


                    me.errorMessage('操作异常');

                });

        }
    }
}
</script>
<style>
.optButton {
    float: right;
    margin-right: 10px;
}

.bate {
    position: absolute;
    bottom: 5px;
    right: 5px;
    font-size: 14px;
}

i.el-icon-bell.abell {
    display: inline-block;
    width: 40px;
    height: 40px;
    text-align: center;
    margin-right: 10px;
    padding-top: 10px;
    color: #409EFF;
    font-size: 1.5em;
    vertical-align: middle;
}

i.el-icon-bell.abell:hover {
    color: #cccccc;
}

i.el-icon-bell.abell.unread {
    color: #FF0000;
}
</style>